import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

let routes = [
    {
        path: '/index', // 路由路径
        component: () => import('../pages/IndexPage.vue'), // 路由懒加载
        name: 'index', // 路由命名
        alias: '/shouye', // 路由别名，也可以访问首页
        meta: { // 路由元信息【通过 $route.meta.title 获取】
            title: '首页',
        },
        children: [ // 二级路由
            {
                path: '/zhiling',
                component: () => import('../pages/指令/ZhiLing.vue'),
                meta: {
                    title: '指令',
                }
            },
            {
                path: '/yangshi',
                component: () => import('../pages/样式/YangShi.vue'),
                meta: {
                    title: '样式',
                }
            },
            {
                path: '/biaodan',
                component: () => import('../pages/表单/BiaoDan.vue'),
                meta: {
                    title: '表单',
                }
            },
            {
                path: '/xiushifu',
                component: () => import('../pages/修饰符/XiuShiFu.vue'),
                meta: {
                    title: '修饰符',
                }
            },
            {
                path: '/jiekou',
                component: () => import('../pages/内置API/JieKou.vue'),
                meta: {
                    title: '内置API',
                }
            },
            {
                path: '/tongxin',
                component: () => import('../pages/通信/TongXin.vue'),
                meta: {
                    title: '组件通信',
                }
            },
            {
                path: '/xiangying',
                component: () => import('../pages/响应/XiangYing.vue'),
                meta: {
                    title: '响应',
                }
            },
            {
                path: '/hunru',
                component: () => import('../pages/混入/HunRu.vue'),
                meta: {
                    title: '混入',
                }
            },
            {
                path: '/chacao',
                component: () => import('../pages/插槽/ChaCao.vue'),
                meta: {
                    title: '插槽',
                }
            },
            {
                path: '/is',
                component: () => import('../pages/is/Is.vue'),
                meta: {
                    title: 'is',
                }
            },
            {
                path: '/ref',
                component: () => import('../pages/ref/Ref.vue'),
                meta: {
                    title: 'ref',
                }
            },
            {
                path: '/luyou',
                component: () => import('../pages/路由跳转/LuYou.vue'),
                meta: {
                    title: '路由跳转',
                },
                beforeEnter(to, from, next) {
                    console.log('beforeEnter', to);
                    console.log('beforeEnter', from);
                    next();
                }
            },
            {
                path: '/params/:id1/:id2',
                name: 'params',
                component: () => import('../pages/传参params/Params.vue'),
                meta: {
                    title: 'params传参',
                },
                beforeEnter(to, from, next) {
                    console.log('beforeEnter', to);
                    console.log('beforeEnter', from);
                    next();
                }
            },
            {
                path: '/query',
                name: 'query',
                components: () => import('../pages/传参query/Query.vue'),
                meta: {
                    title: 'query传参',
                }
            },
            {
                path: '',
                redirect: '/hello'
            }
        ]
    },
    {
        path: '/hello',
        components: {
            default: () => import('../pages/HelloPage.vue'),
            header: () => import('../pages/传参query/Header.vue')
        },
        name: 'hello',
        alias: '/nihao', // 也可以访问你好
        meta: {
            title: '你好',
        }
    },
    {
        path: '/menu',
        component: () => import('../pages/MenuList.vue'),
        name: 'menu',
        alias: '/menulist', // 也可以访问
        meta: {
            title: '菜单',
        }
    },
    {
        path: '/user',
        component: () => import('../pages/UserList.vue'),
        name: 'user',
        alias: '/userlist', // 也可以访问
        meta: {
            title: '用户',
        }
    },
    {
        path: '/role',
        component: () => import('../pages/RoleList.vue'),
        name: 'role',
        alias: '/rolelist', // 也可以访问
        meta: {
            title: '角色',
        }
    },
    {
        path: '*',
        redirect: '/index' // 路由重定向
    }
]

const router = new Router({
    routes
});

router.beforeEach((to, from, next) => {
    console.log('beforeEach', to);
    console.log('beforeEach', from);
    next();
});
router.afterEach((to, from) => {
    console.log('afterEach', to);
    console.log('afterEach', from);
})

export default router;